<template>
  <el-row style="margin-bottom: 20px">
    <el-col :span="12" style="font-size: 18px; font-weight: bold">我的地址</el-col>
    <el-col :span="12" style="text-align: right"><el-button type="primary" @click="showAddDialog">添加地址</el-button></el-col>
  </el-row>
  <div>
    <ul class="addrList">
      <li v-for="(addr, index) in addList" :key="index" :class="{defaultAddr: addr.status == 1}">
          <div class="area">{{addr.province}} - {{addr.city}} - {{addr.district}} - {{addr.street}}</div>
          <div class="address">{{addr.address}}</div>
          <div class="contact">{{addr.contact}}</div>
          <div class="phone">{{addr.phone}}</div>
          <div class="option">
            <span v-if="addr.status == 1" class="defauleInfo">默认地址</span>
            <el-button size="small" @click="setDefault(addr.id)" v-else>设为默认</el-button>
            <el-button size="small" @click="showUpdateDialog(addr.id)">编辑</el-button>
            <el-popconfirm
                title="你确定删除该地址吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="deleteAddr(addr.id)"
            >
              <template #reference>
                <el-button size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
      </li>
    </ul>
  </div>
  <!-- 新增地址对话框开始 -->
  <el-dialog v-model="addrDialogShow" title="新增地址" width="1000">
    <el-form>
      <el-form-item label="省/市/区县/街道" label-width="15%">
        <el-select v-model="addr.province" placeholder="请选择省" style="width: 180px; margin-right: 10px" @change="selectProvince">
          <el-option
              v-for="(province, index) in pcas"
              :key="index"
              :value="province.name"
          />
        </el-select>
        <el-select v-model="addr.city" placeholder="请选择市" style="width: 180px; margin-right: 10px" @change="selectCity">
          <el-option
              v-for="(city, index) in province.children"
              :key="index"
              :value="city.name"
          />
        </el-select>
        <el-select v-model="addr.district" placeholder="请选择区县" style="width: 180px; margin-right: 10px" @change="selectDistrict">
          <el-option
              v-for="(district, index) in city.children"
              :key="index"
              :value="district.name"
          />
        </el-select>
        <el-select v-model="addr.street" placeholder="请选择区县" style="width: 180px; margin-right: 10px">
          <el-option
              v-for="(street, index) in district.children"
              :key="index"
              :value="street.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" label-width="15%">
        <el-input v-model="addr.address" placeholder="请输入详细地址" style="width: 500px;"></el-input>
      </el-form-item>
      <el-form-item label="联系人" label-width="15%">
        <el-input v-model="addr.contact" placeholder="请输入收货联系人" style="width: 500px;"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" label-width="15%">
        <el-input v-model="addr.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addrDialogShow = false">取消</el-button>
        <el-button type="primary" @click="insert">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增地址对话框结束 -->
  <!-- 修改地址对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改地址" width="1000">
    <el-form>
      <el-form-item label="省/市/区县/街道" label-width="15%">
        <el-select v-model="addr.province" placeholder="请选择省" style="width: 180px; margin-right: 10px" @change="selectProvince">
          <el-option
              v-for="(province, index) in pcas"
              :key="index"
              :value="province.name"
          />
        </el-select>
        <el-select v-model="addr.city" placeholder="请选择市" style="width: 180px; margin-right: 10px" @change="selectCity">
          <el-option
              v-for="(city, index) in province.children"
              :key="index"
              :value="city.name"
          />
        </el-select>
        <el-select v-model="addr.district" placeholder="请选择区县" style="width: 180px; margin-right: 10px" @change="selectDistrict">
          <el-option
              v-for="(district, index) in city.children"
              :key="index"
              :value="district.name"
          />
        </el-select>
        <el-select v-model="addr.street" placeholder="请选择区县" style="width: 180px; margin-right: 10px">
          <el-option
              v-for="(street, index) in district.children"
              :key="index"
              :value="street.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" label-width="15%">
        <el-input v-model="addr.address" placeholder="请输入详细地址" style="width: 500px;"></el-input>
      </el-form-item>
      <el-form-item label="联系人" label-width="15%">
        <el-input v-model="addr.contact" placeholder="请输入收货联系人" style="width: 500px;"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" label-width="15%">
        <el-input v-model="addr.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改地址对话框结束 -->
</template>

<script setup>
import {ref} from "vue";
import addrApi from "@/api/addrApi.js";
import {ElMessage} from "element-plus";
import pcas from "@/stores/pcas-code.json";
//是否让添加对话框显示
const addrDialogShow = ref(false);
//是否让修改对话框显示
const updateDialogShow = ref(false);
//保存新增和修改地址信息的对象
const addr = ref({
  id: null,
  contact: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  street: '',
  address: '',
  userId: null,
});
//是否让添加的对话框显示
const  addList = ref([]);
//选中的省
const province = ref({});
//选中的市
const city = ref({});
//选中的区镇
const district = ref({});
const setDefault = (id) => {
  let addr = {
    id: id,
    status: 1
  }
  addrApi.update(addr)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          getAddrList();
        }else {
          ElMessage.error(resp.msg);
        }
      })
};
//省被选中之后调用
const selectProvince = (value) => {
  city.value = {};
  district.value = {};
  addr.value.city = '';
  addr.value.district = '';
  addr.value.street = '';
  pcas.forEach(p => {
    if (p.name == value) {
      province.value = p;
    }
  })
}
//市被选中之后调用
const selectCity = (value) => {
  district.value = {};
  addr.value.district = '';
  addr.value.street = '';
  province.value.children.forEach(c => {
    if (c.name == value) {
      city.value = c;
    }
  })
}
//街道被选中之后调用
const selectDistrict = (value) => {
  addr.value.street = '';
  city.value.children.forEach(d => {
    if (d.name == value) {
      district.value = d;
    }
  })
}
//获取当前用户的所有地址
const getAddrList = ()=> {
  addrApi.selectByUser()
      .then(resp => {
        if (resp.code == 10000) {
          addList.value = resp.data;
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
//清空新建内容
const resetAddr = () => {
  addr.value = {
    id: null,
    contact: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    street: '',
    address: '',
    userId: null,
  };
  //选中的省
  province.value = {};
  //选中的市
  city.value = {};
  //选中的区镇
  district.value = {};
}
//显示对话框
const showAddDialog = (resp => {
    resetAddr();
    addrDialogShow.value = true;
})
//新增地址
const insert = () => {
  addrApi.insert(addr.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
          //关闭对话框
          addrDialogShow.value = false;
          //刷新界面
          getAddrList();
          //情况内容
          resetAddr();
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//回显数据
const showUpdateDialog = (id) => {
  //根据id 查询数据
  addrApi.selectById(id)
      .then(resp => {
        if (resp.code == 10000) {
          addr.value = resp.data;
          //设置province、city、district这三个对象的值
          x:for (let p of pcas) {
            if (p.name == addr.value.province) {
              province.value = p;
              for (let c of province.value.children) {
                if (c.name == addr.value.city) {
                  city.value = c;
                  for (let d of city.value.children) {
                    if (d.name == addr.value.district) {
                      district.value=d;
                      break x;
                    }
                  }
                }
              }
            }
          }
          updateDialogShow.value = true;
        }else {
          ElMessage.error(resp.msg)
        }
      });
}
//修改地址
const update = ()=> {
  addrApi.update(addr.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          //刷新界面
          getAddrList();
          //清空值
          resetAddr();
          //关闭对话框
          updateDialogShow.value = false;
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//删除地址
const deleteAddr = (id) =>{
  addrApi.delete(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
          getAddrList()
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
getAddrList()
</script>

<style scoped>
  .addrList li {
    float: left;
    margin: 0px 20px 20px 0px;
    width: 280px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
  }
  .addrList li:hover {
    box-shadow:0px 0px 20px #000 ;
  }
  .addrList li:nth-child(3n){
    margin-right: 0px;
  }
  .addrList li div {
    height: 30px;
    line-height: 30px;
  }
  .addrList li .area {
    font-size: 18px;
    font-weight: bold;
  }
  .addrList li .address {
    font-size: 14px;
    color: #aaaaaa;
  }
  .addrList li .contact {
    color: var(--theme-color);
    font-weight: bold;
  }
  .addrList li .phone {
    font-size: 14px;
  }
  .addrList li .option {
    text-align: right;
  }
  .addrList .defauleInfo {
    font-weight: bold;
    color: var(--theme-color);
    margin-right: 10px;
  }
  .addrList .defaultAddr:hover {
    box-shadow: 0px 0px 20px var(--theme-color);
  }
  .addrList .defaultAddr {
    border: 2px solid var(--theme-color);
    height: 147px;
  }
</style>